<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <!-- 搜索的部分 -->
    <el-card style="margin-top:20px;font-size:14px;color:#606266">
      <el-form
        ref="form"
        label-width="120px"
        inline
        :model="form"
      >
        <el-form-item
          label="车型编号"
          prop="id"
        >
          <el-input
            v-model="form.id"
            placeholder="请输入车型编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
          style="margin-left: 80px"
        >
          <el-select
            v-model="form.allowableLoad"
            placeholder="请选择应载重量"
          >
            <el-option
              v-for="item in allowableLoadOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
          style="margin-left: 80px"
        >
          <el-select
            v-model="form.allowableVolume"
            placeholder="请选择应载体积"
          >
            <el-option
              v-for="item in allowableVolumeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请选择车辆类型"
          ></el-input>
        </el-form-item>
        <el-button
          style="margin-left:60px"
          type="danger"
          class="add-btn"
          @click="search"
        >搜索</el-button>
        <el-button @click="clear">重置</el-button>
      </el-form>
    </el-card>
    <!-- 表格部分 -->
    <el-card style="margin-top:10px">
      <el-button
        height="250"
        type="danger"
        style="margin:20px"
        size="mini"
        @click="showDialog = true"
      >新增车型</el-button>
      <el-table :data="tableData">
        <el-table-column
          type="index"
          label="序号"
          prop="num"
          width="80"
        >
        </el-table-column>
        <el-table-column
          label="车型编号"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="车辆类型"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="车型数量"
          prop="num"
        ></el-table-column>
        <el-table-column
          label="应载重量(吨)"
          prop="allowableLoad"
        ></el-table-column>
        <el-table-column
          label="应载体积(立方米)"
          prop="allowableVolume"
        ></el-table-column>
        <el-table-column
          label="长(米)"
          prop="measureLong"
        ></el-table-column>
        <el-table-column
          label="宽(米)"
          prop="measureWidth"
        ></el-table-column>
        <el-table-column
          label="高(米)"
          prop="measureHigh"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template v-slot="{ row }">
            <!-- {{ row }} -->
            <el-button
              type="text"
              size="mini"
              @click="edit(row)"
            >编辑</el-button>
            <span style="padding:5px">|</span>
            <el-popconfirm
              title="您确定要删除这一条内容吗"
              @onConfirm="del(row)"
            >
              <el-button
                slot="reference"
                type="text"
                style="color:red"
                size="mini"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器功能 -->
      <div style="display:flex;justify-content: center;margin-bottom:50px">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout=" total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <carModelsAdd
      ref="carModelsAdd"
      :show-dialog="showDialog"
      @closeDialog="closeDialog"
    ></carModelsAdd>
  </div>
</template>
<script>
// 调用列表接口  、删除
import { list as carList, del as delCar } from '@/api/transit'
// 子组件
import carModelsAdd from './components/car-models-add.vue'
export default {
  components: {
    carModelsAdd
  },
  data() {
    return {
      form: {
        // 编号
        id: '',
        // 重量
        allowableLoad: '',
        // 体积
        allowableVolume: '',
        // 车型
        name: ''
      },
      // 载重
      allowableLoadOptions: [
        {
          value: 'RANGE_LEVEL_1',
          label: '<1.8(吨)'
        },
        {
          value: 'RANGE_LEVEL_2',
          label: '1.8-6(吨)'
        },
        {
          value: 'RANGE_LEVEL_3',
          label: '6-14(吨)'
        },
        {
          value: 'RANGE_LEVEL_4',
          label: '14-30(吨)'
        },
        {
          value: 'RANGE_LEVEL_5',
          label: '30-50(吨)'
        },
        {
          value: 'RANGE_LEVEL_6',
          label: '50-100(吨)'
        },
        {
          value: 'RANGE_LEVEL_7',
          label: '100>(吨)'
        }
      ],
      // 体积
      allowableVolumeOptions: [
        {
          value: 'RANGE_LEVEL_1',
          label: '<3(m³)'
        },
        {
          value: 'RANGE_LEVEL_2',
          label: '3-5(m³)'
        },
        {
          value: 'RANGE_LEVEL_3',
          label: '5-10(m³)'
        },
        {
          value: 'RANGE_LEVEL_4',
          label: '10-15(m³)'
        },
        {
          value: 'RANGE_LEVEL_5',
          label: '15-30(m³)'
        },
        {
          value: 'RANGE_LEVEL_6',
          label: '30-50(m³)'
        },
        {
          value: 'RANGE_LEVEL_7',
          label: '50-80(m³)'
        },
        {
          value: 'RANGE_LEVEL_8',
          label: '80-150(m³)'
        },
        {
          value: 'RANGE_LEVEL_9',
          label: '150>(m³)'
        }
      ],
      // 表格数据
      tableData: [],
      // 获取的参数
      queryParams: {
        page: 1,
        pageSize: 10
      },
      // 总条数
      total: null,
      // 控制弹窗的显示与隐藏
      showDialog: false
      // 显示编辑按钮
      // editId: null
    }
  },
  created() {
    this.getCarTypeList()
  },
  methods: {
    // 重置按钮的函数
    clear() {
      this.$refs.form.resetFields()
      // 重新刷新列表
      this.getCarTypeList()
    },
    // 获取表格基本信息的列表
    async getCarTypeList() {
      const rs = await carList(this.queryParams)
      // console.log(rs, 1111111)
      this.tableData = rs.data.items
      this.total = +rs.data.counts
    },
    // 搜索的函数
    async search() {
      const rs = await carList({ ...this.queryParams, ...this.form })
      console.log(rs)
      this.tableData = rs.data.items
      this.total = +rs.data.counts
    },
    async handleSizeChange(val) {
      this.queryParams.pageSize = val
      // console.log(`每页 ${val} 条`)
      const rs = await carList(this.queryParams)
      this.tableData = rs.data.items
    },
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.queryParams.page = val

      // 发起请求
      const rs = await carList(this.queryParams)
      this.tableData = rs.data.items
    },

    // 子组件关闭弹窗
    closeDialog(val) {
      // console.log(val)
      this.showDialog = val
      // 刷新列表
      this.getCarTypeList()
    },
    // 删除操作
    async del(row) {
      await delCar(row.id)
      // 提示用户
      this.$message.success('删除成功')
      // 刷新列表
      this.getCarTypeList()
    },
    // 编辑按钮
    edit(row) {
      this.$refs.carModelsAdd.getDetail(row.id)
      this.showDialog = true
      // 调用子组件的方法
      // console.log(row.id)
      // this.editId = row.id
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.add-btn {
  margin-bottom: 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
  padding-bottom: 0px;
}

.el-select {
  width: 100%;
}

.car-models /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.car-models {
  /deep/ .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  /deep/ .el-dialog__body {
    text-align: center;
    padding: 40px 60px 0 30px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}
</style>
